<style>
    #right-column {
        position: fixed;
        top: 30%;
        right: 0px;
        z-index: 9990;
    }

    .column-item {
        cursor: pointer;
        width: 90px;
        height: 90px;
        border-bottom: .5px solid #DADADA;
        border-left: .5px solid #DADADA;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #EFF0F2;
    }

    .act-float {
        margin-bottom: 30px;
        background: transparent !important;
        display: flex;
        align-items: center;
        border: none !important;
    }

    .act-float:hover {
        background: transparent !important;
    }
</style>
<section id="right-column">
<!--    <div class="column-item act-float" onclick="window.location.href='{$Request.root}/activities/act202104.html?utm_source=右侧悬浮活动按钮'">-->
<!--        <img class="img-responsive center-block" alt="" src="https://res.bestyoujia.com/web/ZMYJ/assets/img/bottom/6th.png">-->
<!--    </div>-->
    <div class="column-item" type="0" style='background-color: #B94047;'>
        <img class="img-responsive center-block" style="margin-top: 10px;"
             src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/consult.png">
        <p class="text-center" style="margin-top: 5px;font-size: 16px;color: #fff;">
            在线咨询
        </p>
    </div>
    <div class="column-item" type="1">
        <img class="img-responsive center-block" style="margin-top: 10px;"
             oversrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/plan.png"
             outsrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/plan.png"
             src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/plan.png">
        <p class="text-center" style="margin-top: 5px;font-size: 16px;color: #707070;">
            获取方案
        </p>
    </div>
    <div class="column-item" type="2">
        <img class="img-responsive center-block" style="margin-top: 10px;"
             oversrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/offer.png"
             outsrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/offer.png"
             src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/offer.png">
        <p class="text-center" style="margin-top: 5px;font-size: 16px;color: #707070;">
            获取报价
        </p>
    </div>
    <div class="column-item" type="3">
        <img class="img-responsive center-block" style="margin-top: 10px;"
             oversrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/serve.png"
             outsrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/serve.png"
             src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/serve.png">
        <p class="text-center" style="margin-top: 5px;font-size: 16px;color: #707070;">
            预约服务
        </p>
    </div>
    <div id="back-top" style="cursor: pointer;display: none" class="column-item" type="4">
        <img class="img-responsive center-block" style="margin-top: 10px;"
             oversrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/top.png"
             outsrc="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/top.png"
             src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/top.png">
        <p class="text-center" style="margin-top: 5px;font-size: 16px;color: #707070;">
            回到顶部
        </p>
    </div>
</section>
<script>
    const currentHeight = $(window).scrollTop();
    const height = $(window).height();
    let isShow = false;
    if (currentHeight > height) {
        $('#back-top').fadeIn();
        isShow = true;
    }
    $(window).scroll(function () {
        if ($(window).scrollTop() > height) {
            if (!isShow) {
                $('#back-top').fadeIn();
                isShow = !isShow;
            }
        }else {
            if (isShow) {
                $('#back-top').fadeOut();
                isShow = !isShow;
            }
        }
    });


    $('.column-item').mouseover(function () {
        const type = $(this).attr('type');
        if (type != 0) {
            const oversrc = $(this).children('img').attr('oversrc');
            $(this).css('background-color','#EFF0F2');
            $(this).children('img').attr('src',oversrc);
            // $(this).children('p').css('color','#1BA89C');
        }
    });
    $('.column-item').mouseout(function () {
        const type = $(this).attr('type');
        if (type != 0) {
            var outsrc = $(this).children('img').attr('outsrc');
            $(this).css('background-color','#EFF0F2');
            $(this).children('img').attr('src',outsrc);
            // $(this).children('p').css('color','#333');
        }
    });


    $('.column-item').click(function () {
        const type = parseInt($(this).attr('type'));
        switch (type) {
            // 在线咨询
            case 0:
                doConsult();
                break;
            // 获取方案
            case 1:
                window.page_position = '侧边栏-获取方案';
                showAppointmentDialog('获取全屋规划方案');
                $('.right-container-appointment').hide();
                $('.enroll-right').show();
                $('.enroll-left').css('border-right', '1px #eee solid');
                $('.enroll-left').css('padding', '0 80px 0 20px');
                $('.enroll-style').show();
                break;
            // 获取报价
            case 2:
                window.page_position = '侧边栏-获取报价';
                $('.right-container-appointment-left-title').text('提前算一算，美学整配需要多少钱');
                $('.right-container-appointment').show();
                $('.enroll-left').hide();
                $('.enroll-right').hide();
                $('#enroll-container').fadeIn();
                $('#enroll-container').css({"display": "flex"});
                $("body,html").css({"overflow": "hidden"});
                break;
            // 预约服务
            case 3:
                window.page_position = '侧边栏-预约服务';
                showAppointmentDialog('预约美学整配服务');
                $('.right-container-appointment').hide();
                $('.enroll-right').hide();
                $('.enroll-left').css('border', 'none');
                $('.enroll-left').css('padding', '0 20px 0 20px');
                $('.enroll-style').hide();
                break;
            // 返回顶部
            case 4:
                $('html, body').animate({scrollTop:0}, 'slow');
                break;
        }
    });
</script>